import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import $ from "jquery"
import "./index.css"
class Index extends Component{
	constructor(props){
		super(props)
		this.state={
			showPassword:false,
			showSurePassword:false,
			passwordNotice:false,
			showUser:false,
			userNotice:false
			// userNotice:2
		}
	}

	valueOff(off,ev){
		let This=this
		let value=ev.target.value
		if(value&&off==="username"){
			$.post("/enrollsubmitajax",{
				"username":value
			},function(data){
				if(data==="1"){
					This.setState((prevState)=>{
						// let userNotice=prevState.userNotice
						// userNotice++
						// if(userNotice%2===0){
						// 	userNotice++
						// }
						return ({
							"showUser":true,
							"userNotice":false
						})
					})
					return ;
				}
				else{
					This.setState((prevState)=>{
						// let userNotice=prevState.userNotice
						// userNotice++
						// if(userNotice%2!==0){
						// 	userNotice++
						// }
						return ({
							"showUser":false,
							"userNotice":true
						})
					})
					return ;
				}
			})
		}
		else if(value&&off==="password"){
			if(this.surePassword.value){
				if(this.surePassword.value===value){
					this.setState((prevState)=>{
						return ({
							"showSurePassword":true,
							"showPassword":true,
							"passwordNotice":false
						})
					})
					return ;
				}
				else{
					this.setState((prevState)=>{
						return ({
							"showSurePassword":false,
							"showPassword":false,
							"passwordNotice":true
						})
					})
					return ;
				}
			}
			else{
				this.setState((prevState)=>{
					return ({
						"showSurePassword":false,
						"showPassword":true,
						"passwordNotice":false
					})
				})
				return ;
			}		
		}
		else if(value&&off==="surepassword"){
			if(this.password.value===value){
				this.setState((prevState)=>{
					return ({
						"showSurePassword":true,
						"showPassword":true,
						"passwordNotice":false
					})
				})
				return ;
			}
			else{
				this.setState((prevState)=>{
					return ({
						"showPassword":false,
						"showSurePassword":false,
						"passwordNotice":true
					})
				})
				return ;
			}
			return ;
		}
	}

	submit(ev){
		if(!(this.state.showSurePassword&&this.state.showPassword&&this.state.showUser)){
			ev.preventDefault()
		}
		return ;
	}

	render(){
		return (
			<div className="container ">
				<div className="fixedbg"></div>
				<div className="row">
					<div className="bg col-lg-4 col-md-4 col-sm-6 col-xs-6
									col-lg-push-4 col-md-push-4 col-sm-push-3 col-xs-push-3
					">
						<form action="/enrollsubmit" method="post">
							<div className="form-group">
								<div className="has-feedback">
									<label htmlFor="username" className="font-relief">用户名</label>
									<input 
										ref={(input)=>this.username=input}
										onBlur={this.valueOff.bind(this,"username")}
										type="text" 
										id="username" 
										name="username" 
										className="form-control"
										placeholder="请输入用户名"
									 />
									<span className={this.state.userNotice?"show-notice":"hide-notice"}>用户名已存在</span>
									<span className={this.state.showUser?"glyphicon glyphicon-ok form-control-feedback enroll-glyphicon":"glyphicon glyphicon-remove form-control-feedback enroll-glyphicon"}></span>
								</div>
								
							</div>
							<div className="form-group">
								<div className="has-feedback">
									<label htmlFor="password" className="font-relief">密码</label>
									<input 
										ref={(input)=>this.password=input}
										onBlur={this.valueOff.bind(this,"password")}
										type="password" 
										id="password" 
										name="password" 
										className="form-control" 
										placeholder="请输入密码" 
									/>
									<span className={this.state.showPassword?"glyphicon glyphicon-ok form-control-feedback enroll-glyphicon":"glyphicon glyphicon-remove form-control-feedback enroll-glyphicon"}></span>
									<span className={this.state.passwordNotice?"show-notice":"hide-notice"}>密码不一致</span>
								</div>
							</div>
							<div className="form-group">
								<div className="has-feedback">
									<label htmlFor="surepassword" className="font-relief" >确认密码</label>
									<input
										ref={(input)=>this.surePassword=input}
										onBlur={this.valueOff.bind(this,"surepassword")}
										type="password" 
										id="surepassword" 
										name="surepassword" 
										placeholder="再次确认密码" 
										className="form-control" 
									/>
									<span className={this.state.showSurePassword?"glyphicon glyphicon-ok form-control-feedback enroll-glyphicon":"glyphicon glyphicon-remove form-control-feedback enroll-glyphicon"}></span>
									<span className={this.state.passwordNotice?"show-notice":"hide-notice"}>密码不一致</span>
								</div>
							</div>
							<div className="form-group">
								<input 
									type="submit" 
									id="submit" 
									name="submit" 
									className="form-control submitmargin font-relief" 
									value="提交" 
									onClick={this.submit.bind(this)}
								/>
							</div>
						</form>
					</div>
				</div>
			</div>
		)
			
	}
}
ReactDOM.render(<Index />, document.getElementById('index'));
